<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>客户系统-会员编辑</title>
    <script src="../../../../static/js/vue.js" th:src="@{/js/vue.js}"></script>
	<link rel="stylesheet" href="../../../../static/css/element.css" th:href="@{/css/element.css}">
	<link rel="stylesheet" href="../../../../static/css/global.css" th:href="@{/css/global.css}" />
	<link rel="stylesheet" href="../../../../static/css/main.css" th:href="@{/css/main.css}" />
	<link rel="stylesheet" href="../../../../static/css/myelement.css" th:href="@{/css/myelement.css}" />
	<!-- 引入组件库 -->
	<script src="../../../../static/js/element.js" th:src="@{/js/element.js}"></script>
	<script src="../../../../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
</head>
<body>
<div id="app">
    <div class="main-content" v-cloak>
    	<!-- 页面头部 -->
		<div class="page-header">
			<h1 class="page-title">会员编辑</h1>
			<div class="breadcrumb"><a href="javascript:top.location.reload();">首页</a><span>/</span>客户<span>/</span><a href="/backstage/customer/customer/tolist">会员列表</a></div>
		</div><!-- 页面头部 end -->
		
        <div class="main-content-body">
			<div class="edit-form">
        		<el-form ref="customer-form" :model="customer" :rules="rules" label-width="100px">
        			<el-input type="hidden" v-model="customer.uuid"></el-input>
        			<h3 class="edit-form-title">账号信息</h3>
        			<el-form-item prop="loginName" label="登录账号">
                        <el-input v-model="customer.loginName" disabled></el-input>
                        <el-button type="primary" @click="customer.resetPassword = !customer.resetPassword">重置密码</el-button>
                         	<el-popover
							  ref="popoverqsur"
							  placement="bottom-start"
							  width="440"
							  trigger="hover">
						  	<p class="z-jiao">重置成系统默认密码。如需修改，请自行修改。</p>
							</el-popover>
							<i v-popover:popoverqsur class="el-icon-question"></i>
                    </el-form-item>
        			<el-collapse-transition>
				        <div v-show="customer.resetPassword">
				        	<el-form-item prop="password" label="登录密码">
		                        <el-input v-model="customer.password"></el-input>
		                        <el-checkbox v-model="customer.sendMessage">短信通知会员</el-checkbox>
		                        <el-popover
								  ref="popoverqsu"
								  placement="bottom-start"
								  width="440"
								  trigger="hover">
								  <p class="z-jiao">系统将推送一条短信给该会员，包含登录账号和密码。</p>
								</el-popover>
								<i v-popover:popoverqsu class="el-icon-question"></i>
		                    </el-form-item>
				        </div>
			        </el-collapse-transition>
            		<el-form-item prop="mobile" label="手机号">
                        <el-input v-model="customer.mobile" placeholder="请填入手机号"></el-input>
                    </el-form-item>
                    <el-form-item prop="activeState" label="账号状态">
                        <el-radio-group v-model="customer.activeState">
                            <el-radio v-for="item in stateList" :key="item.key" :label="item.key">{{item.value}}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item prop="entityNo" label="会员编号">
                        <el-input v-model="customer.entityNo" placeholder="请填入会员编号"></el-input>
                    </el-form-item>
                    
    				<h3 class="edit-form-title">基础信息</h3>
    				<el-form-item label="性别">
                        <el-radio-group v-model="customer.customerAccount.sex">
                            <el-radio v-for="item in sexList" :key="item.key" :label="item.key">{{item.value}}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="生日">
                        <el-date-picker
                               v-model="customer.customerAccount.birthday"
                               type="date" value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item prop="customerAccount.remark" label="备注">
                        <el-input type="textarea" v-model="customer.customerAccount.remark" placeholder="填写相关备注信息" :rows="3"></el-input>
                    </el-form-item>
                    
                    <div class="edit-button-fixed">
	                    <div class="edit-button z-yuan-butn">
							<el-button type="primary" @click="saveCustomer" :loading="loading">保存</el-button>
	            			<el-button @click="returnList">返回</el-button>
						</div>
					</div>
                </el-form>
             </div>
        </div>
   	</div>
</div>
</body>
<script th:inline="javascript">
    new Vue({
        el: "#app",
        data: {
        	customer: [[${dto}]],
            stateList:[[${stateList}]],
            sexList:[[${sexList}]],
            loading:false,
            rules: {
            	loginName: [
                    {required: true, message: "请输入登录账号", trigger: 'blur'},
                    {min:4, max:20, message: '账号长度4到20个字符', trigger: 'blur'}
                ],
                password: [
                    {required: true, message: "请输入登录密码", trigger: 'blur'},
                    {min:4, max:20, message: '密码长度4到20个字符', trigger: 'blur'}
                ],
                mobile: [
                	{required: true, message: "请输入手机号", trigger: 'blur'},
                	{
                        validator: function (rule, value, callback) {
                            var MobileRegex = /^1[0-9]{10}$/;
                            if (value!="" && !MobileRegex.test(value)) {
                                callback(new Error('请填入正确的手机号！'))
                            } else {
                                callback();
                            }
                        }, trigger: 'blur'
                    },
                    {
                        validator: function (rule, value, callback) {
                        	if(value != ""){
                        		$.ajax({
                                    url: "/backstage/customer/customer/checkLoginNameExist",
                                    type: "POST",
                                    data: {loginName:value,uuid:[[${dto.uuid}]]},
                                    dataType: "json",
                                    success: function (data) {
                                   	 	if (data && data.returnCode == "1" && data.returnMessage) {
                                   		 	callback(new Error('手机号已存在！请修改'));
                                        }else{
                                       	 	callback();
                                        }
                                    }
                           	 	});
                        	}
                        }, trigger: 'blur'
                    }
                ],
                activeState: [
                    {required: true, message: "请选择账号状态", trigger: 'blur'}
                ],
                entityNo: [
                	{required: true, message: "请输入会员编号", trigger: 'blur'},
                    {max:30, message: '会员编号30个字符以内', trigger: 'blur'},
                    {
                        validator: function (rule, value, callback) {
                        	if(value != ""){
	                        	$.ajax({
	                                url: "/backstage/customer/customer/checkLoginNameExist",
	                                type: "POST",
	                                data: {entityNo:value,uuid:[[${dto.uuid}]]},
	                                dataType: "json",
	                                success: function (data) {
	                               	 	if (data && data.returnCode == "1" && data.returnMessage) {
	                               		 	callback(new Error('会员编号已存在！请修改'));
	                                    }else{
	                                   	 	callback();
	                                    }
	                                }
	                       	 	});
                        	}
                        }, trigger: 'blur'
                    }
                ],
                customerAccount: {
                	remark: [
                        {max:100, message: '备注长度100个字符以内', trigger: 'blur'}
                    ]
                }
            }
        },
        methods: {
            saveCustomer: function () {
                let self = this;
                self.$refs['customer-form'].validate((valid) => {
                    if (valid) {
                    	self.loading = true;
                        $.ajax({
                            url: "/backstage/customer/customer/platEditCustomer",
                            type: "POST",
                            data: JSON.stringify(self.customer),
                            contentType: "application/json;charset=UTF-8",
                            dataType: "json",
                            success: function (data) {
                                if (data && data.returnCode == "1") {
                                    self.$message({
                                    	showClose: true,
                                    	duration: 1500,
                                        message: '编辑会员成功',
                                        type: 'success',
                                        customClass: 'message-center',
                                        onClose: function () {
                                            window.location.href = "/backstage/customer/customer/tolist"
                                        }
                                    });
                                } else {
                                    self.$message({
                                    	showClose: true,
                                    	duration: 1500,
                                        message: '编辑会员失败',
                                        type: 'error',
                                        customClass: 'message-center'
                                    });
                                    self.loading = false;
                                }
                            },
                            error: function () {
                                self.$message({
                                	showClose: true,
                                	duration: 1500,
                                    message: '系统异常，请联系管理员.',
                                    type: 'error',
                                    customClass: 'message-center'
                                });
                                self.loading = false;
                            }
                        });
                    }
                });
            },
            returnList: function () {
            	window.location.href = "/backstage/customer/customer/tolist";
            }
        }
    });
</script>
</html>
